<template>
	<form class="m-input f-bd f-bd-btm" method="get" action="#">
		<div class="inputcover">
			<i class="u-svg u-svg-srch"></i>
			<input type="text" name="search" class="input" placeholder="搜索歌曲、歌手、专辑" value="" autocomplete="off" v-model="message" @input="childClick" @keyup="get($event)" @keydown.enter="searchInput()" @keydown.down="selectDown()" @keydown.up.prevent="selectUp()">
			<!--<label class="holder">搜索歌曲、歌手、专辑</label>-->
			<figure class="close" v-show="!message==''" @click="_hideen()">
				<i class="u-svg u-svg-empty"></i>
			</figure>
		</div>
		<div class="search-select" v-show="!message==''">
			<h3 class="title f-bd f-bd-btm f-thide">搜索"{{message}}"</h3>
			<transition-group tag="ul" mode="out-in">
				<li class="recomitem" v-for="(_value,index) in searchwrapList" v-if="index<5" :class="{selectback:index==now}" :key="index" @click="searchThis" @mouseover="selectHover(index)">
					<i class="u-svg u-svg-search"></i>
						<span class="f-bd f-bd-btm f-thide">{{_value.name}} {{_value.artists[0].name}}</span>
				</li>
			</transition-group>
		</div>
	</form>
</template>

<script>
	import axios from 'axios'
	import api from '@/api'
	export default {
		data() {
			return {
				message: '',
				search: '',
				searchwrapList: '',
				flag: 0,
				now: -1,
				
			}
		},
		methods: {
			childClick () {
		          this.$emit('messageData',this.message)
//		          console.log(this.message)
		       },
			_hideen () {
				this.message = ''
			},
			get: function(event) {
				if(event.keyCode == 38 || event.keyCode == 40) { //向上向下
					return;
				};
				axios.get(api.searchwrapList + this.message, {
						params: {
							"token": ""
						}
					})
					.then((res) => {
						//				console.log(res)
						this.searchwrapList = res.data.result.songs
					})
					.catch((err) => {
						//			console.log(err)
					})
			},
			//清除内容
			clearInput: function() {
				this.search = '';
				this.get();
			},
			//搜索
			searchInput: function() {
				//		        alert(this.flag)
				window.open(this.logoData[this.flag].searchSrc + this.search);
			},
			//搜索的内容
			searchThis: function(index) {
				this.search = this.searchwrapList[index];
				this.searchInput();
			},
			//li hover
			selectHover: function(index) {
				this.search = this.searchwrapList[index];
				this.now = index;
			},
			//向下
			selectDown: function() {
				this.now++;
				if(this.now == this.searchwrapList.length) {
					this.now = 0;
				}
				this.search = this.searchwrapList[this.now];
			},
			//向上
			selectUp: function() {
				this.now--;
				if(this.now == -1) {
					this.now = this.searchwrapList.length - 1;
				}
				this.search = this.searchwrapList[this.now];
			}
		}
	}
</script>

<style lang="scss" scoped>
	@charset "utf-8";
	$fs:64px;
	html {
		font-size: $fs;
	}
	
	@function r($px) {
		@return $px/$fs*1rem;
	}
	
	.m-input {
		padding: r(30px) r(20px);
	}
	
	.f-bd {
		position: relative;
		border-bottom: r(2px) solid rgba(0, 0, 0, .1);
		.inputcover {
			font-size: 0;
			position: relative;
			width: 100%;
			height: r(60px);
			padding: 0 r(60px);
			background: #ebecec;
			border-radius: r(60px);
			.u-svg-srch {
				position: absolute;
				left: 0;
				top: r(18px);
				margin: 0 r(16px);
				vertical-align: middle;
				width: r(26px);
				height: r(26px);
				background-image: url();
			}
			.u-svg {
				display: inline-block;
				vertical-align: middle;
				background-position: 0 0;
				background-size: contain;
				background-repeat: no-repeat;
			}
			.input {
				width: 100%;
				height: r(60px);
				line-height: r(36px);
				background: transparent;
				font-size: r(28px);
				color: #333;
				outline: none;
				border-radius: 0;
				border: 0;
			}
			::-webkit-input-placeholder {
				/* WebKit, Blink, Edge */
				color: #c9c9c9;
			}
			/*.holder {
			    position: absolute;
			    left: r(60px);
			    top: r(10px);
			    font-size: r(28px);
			    color: #c9c9c9;
			    background: transparent;
			    pointer-events: none;
			    cursor: default;
			}*/
			.close {
				position: absolute;
				right: 0;
				top: 0;
				width: r(60px);
				height: r(60px);
				line-height: r(56px);
				text-align: center;
				margin: 0;
				/*display: none;*/
				.u-svg-empty {
					vertical-align: middle;
					width: r(28px);
					height: r(28px);
					background-size: contain;
					background-repeat: no-repeat;
					background-image: url();
				}
				.u-svg {
					display: inline-block;
					vertical-align: middle;
					background-position: 0 0;
					background-size: contain;
					background-repeat: no-repeat;
				}
			}
		}
		
	}
	
	.f-bd:after {
		position: absolute;
		z-index: 2;
		content: "";
		top: 0;
		left: 0;
		pointer-events: none;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		-webkit-transform-origin: top left;
		transform-origin: top left;
		border: 0 solid rgba(0, 0, 0, .1);
	}
	.search-select {
		margin: 0 auto;
		.title {
		    height: r(100px);
		    margin-left: r(20px);
		    padding-right: r(20px);
		    font-size: r(30px);
		    line-height: r(100px);
		    color: #507daf;
		    font-weight: 400;
		    border-bottom: r(2px) solid rgba(0,0,0,.1);
		}
		.f-bd {
		    position: relative;
		}
		.f-thide {
		    overflow: hidden;
		    text-overflow: ellipsis;
		    white-space: nowrap;
		    word-break: normal;
		}
		.recomitem {
		    display: flex;
		    align-items: center;
		    height: r(90px);
		    padding-left: r(20px);
		    i {
			    flex: 0 0 auto;
			    margin-right: r(14px);
			}
			.u-svg {
			    display: inline-block;
			    vertical-align: middle;
			    background-position: 0 0;
			    background-size: contain;
			    background-repeat: no-repeat;
			    width: r(30px);
			    height: r(30px);
			    background-image: url();
			}
			span {
			    display: inline-block;
			    flex: 1;
			    width: 1%;
			    padding-right: r(20px);
			    font-size: r(30px);
			    line-height: r(90px);
			    color: #333;
			    border-bottom: r(2px) solid rgba(0,0,0,.1);
			}
		}
		}
</style>